<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="api">
        <meta name="product" content="kendo-ui">
        
        <title>API Reference for kendo.data.Model</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="The documentation for kendo.data.Model will help you define a new model, then introduce different methods and guide you to change, get or set an event.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        <script src="/assets/dojo.js?cb=545f7f252dd3279c5a236b777c1668f1"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("api/javascript/data/model.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//api/javascript/data/model.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    <div id="markdown-toc"></div>

    <div id="page-article">
        <article>
            
             <h1 id="kendodatamodel"><a href="#kendodatamodel">kendo.data.Model</a></h1>

<p>The <code>Model</code> inherits from the <a href="/api/javascript/data/observableobject">ObservableObject</a> and extends it with the ability to define schema - fields and methods. The
<a href="/api/javascript/data/datasource">DataSource</a> contains instances of the <code>Model</code> when the <a href="/api/javascript/data/datasource#configuration-schema.model">schema.model</a> setting is specified.</p>

<h2 id="configuration"><a href="#configuration">Configuration</a></h2>

<p>To define a new model use the <code>Model.define</code> method.</p>

<h3 id="configuration-Define"><a href="#configuration-Define">Define a model</a></h3>

<pre><code>&lt;script&gt;
var Person = kendo.data.Model.define({
    id: "personId", // the identifier of the model
    fields: {
        "name": {
            type: "string"
        },
        "age": {
            type: "number"
        }
    }
});

var person = new Person({
    name: "John Doe",
    age: 42
});

console.log(person.get("name")); // outputs "John Doe"
console.log(person.get("age")); // outputs 42
&lt;/script&gt;
</code></pre>

<h2 id="fields"><a href="#fields">Fields</a></h2>

<h3 id="fields-id"><a href="#fields-id">id</a></h3>

<p>The value of the Model's ID. This field is available <strong>only</strong> if the <code>id</code> is defined in the Model configuration. See the example below.</p>

<h3 id="fields-idField">
<a href="#fields-idField">idField </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The name of the Model's ID field. This field is available <strong>only</strong> if the <code>id</code> is defined in the Model configuration.</p>

<pre><code>&lt;script&gt;
var Person = kendo.data.Model.define({
    id: "personId",
    fields: {
        "name": {
            type: "string"
        },
        "age": {
            type: "number"
        }
    }
});

var person = new Person({
    personId: 1,
    name: "John Doe",
    age: 42
});

console.log(person.id); // outputs 1
console.log(person.idField); // outputs "personId"
&lt;/script&gt;
</code></pre>

<h3 id="fields-uid"><a href="#fields-uid">uid</a></h3>

<p>The unique identifier of the <code>Model</code>. Inherited from <code>ObservableObject</code>. More info can be found in the <a href="/api/javascript/data/observableobject#fields-uid">uid</a> section of the
ObservableObject API reference.</p>

<p>The main benefit of uid's is to represent a link between data items (that may not have an ID of their own) and the corresponding rendered DOM elements (list items, table rows, etc). The uid's are generated randomly and they are not persisted across data or web page reloads.</p>

<h3 id="fields-dirty">
<a href="#fields-dirty">dirty </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a>
</h3>

<p>Indicates whether the model is modified.</p>

<h4>Example - using the dirty field</h4>

<pre><code>&lt;script&gt;
var model = new kendo.data.Model({
    name: "John Doe"
});

console.log(model.dirty); // outputs "false"
model.set("name", "Jane Doe");
console.log(model.dirty); // outputs "true"
&lt;/script&gt;
</code></pre>

<h2 id="methods"><a href="#methods">Methods</a></h2>

<h3 id="methods-bind"><a href="#methods-bind">bind</a></h3>

<p>Attaches a handler to an event. Examples and more info can be found in the <a href="/api/javascript/observable#methods-bind">bind</a> section of the <code>kendo.Observable</code> API reference.</p>

<h3 id="methods-Model.define"><a href="#methods-Model.define">Model.define</a></h3>

<p>Defines a new <code>Model</code> type using the provided options. The returned value inherits from the <code>kendo.data.Model</code> class.</p>

<h4>Parameters</h4>

<h5>options <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>Describes the configuration options of the new model type.</p>

<h5>options.id <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The name of the field which acts as the identifier of the model. The identifier is used to determine if a model instance is new or existing one.
If the value of the field specified is equal to the default value (specified through the <code>fields</code> configuration) the model is considered as new.</p>

<h5>options.fields <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h5>

<p>A set of key/value pairs the configure the model fields. The key specifies the name of the field.
Quote the key if it contains spaces or other symbols which are not valid for a JavaScript identifier.</p>

<blockquote>
<p>A field configuration cannot contain nested fields' configurations.</p>
</blockquote>

<h5>options.fields.fieldName.defaultValue</h5>

<p>Specifies the default value which will be used for the field when a new model instance is created. The default settings depend on the type of the field. The default value for "string" is <code>""</code>, for "number" is <code>0</code>, and for "date" is <code>new Date()</code> (today).</p>

<p>The parameter can also be set to a function that returns the dynamic default values of the fields. For a live demo, refer to <a href="/controls/data-management/grid/how-to/filtering/use-filtering-with-dynamic-default-values">this how-to example</a>.</p>

<h5>options.fields.fieldName.editable <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a>
</h5>

<p>Specifies if the field is editable or not. The default value is <code>true</code>.</p>

<h5>options.fields.fieldName.nullable <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a>
</h5>

<p>Specifies if the <code>defaultValue</code> setting should be used. The default is <code>false</code>.</p>

<h5>options.fields.fieldName.parse <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h5>

<p>Specifies the function which will parse the field value. If not set default parsers will be used.</p>

<h5>options.fields.fieldName.type <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>Specifies the type of the field. The available options are <code>"string"</code>, <code>"number"</code>, <code>"boolean"</code>, <code>"date</code>" and <code>"object</code>". The default is <code>"string"</code>.</p>

<h5>options.fields.fieldName.from <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>Specifies the field of the original record whose value is used to populate the Model field. When CRUD operations (specifically adding new items) are enabled, the original field name should be defined with a <code>defaultValue</code> as well, because during updates and creates the Kendo UI DataSource will try to construct a data item object, which matches the original (server-side) data item structure. For more information and an example, please refer to <a href="/controls/data-management/grid/how-to/binding/use-nested-model-properties">How to Use Nested Model Properties</a>.</p>

<h5>options.fields.fieldName.validation <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>Specifies the validation options which will be used by <a href="/api/javascript/ui/validator">Kendo Validator</a>.</p>

<h4>Example - define the fields of a model</h4>

<pre><code>&lt;script&gt;
var Product = kendo.data.Model.define( {
    id: "id", // the identifier is the "id" field (declared below)
    fields: {
        /* name of the field */ name: {
            type: "string", // the field is a string
            validation: { // validation rules
                required: true // the field is required
            },
            defaultValue: "&lt;empty&gt;" // default field value
        },

        /* name of the field */ price: {
            type: "number", // the field is a number
            validation: { // validation rules
                required: true, // the field is required
                min: 1 // the minimum value is 1
            },
            defaultValue: 99.99 // default field value
        },

        /* name of the field */ id: {
            editable: false, // this field is not editable
            nullable: true // a default value will not be assigned
        }
    }
});
var product = new Product();
console.log(product.get("price")); // outputs "99.99" which is the default value
&lt;/script&gt;
</code></pre>

<h3 id="methods-editable"><a href="#methods-editable">editable</a></h3>

<p>Determines if the specified field is editable or not.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <code>true</code> if the field is editable; <code>false</code> otherwise.</p>

<h4>Parameters</h4>

<h5>field <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The field to check.</p>

<h4>Example - check if a field is editable or not</h4>

<pre><code>&lt;script&gt;
var Product = kendo.data.Model.define({
    fields: {
        id: {
            editable: false
        },
        name: {
            editable: true
        }
    }
});
var product = new Product();
console.log(product.editable("id")); // outputs "false"
console.log(product.editable("name")); // outputs "true"
&lt;/script&gt;
</code></pre>

<h3 id="methods-get"><a href="#methods-get">get</a></h3>

<p>Gets the value of the specified field. Inherited from <code>kendo.data.ObservableObject</code>. Examples and more info can be found in the <a href="/api/javascript/data/observableobject#methods-get">get</a> section of the
ObservableObject API reference.</p>

<h3 id="methods-isNew"><a href="#methods-isNew">isNew</a></h3>

<p>Checks if the <code>Model</code> is new or not. The <code>id</code> field is used to determine if a model instance is new or existing one.
If the value of the field specified is equal to the default value (specified through the <code>fields</code> configuration) the model is considered as new.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <code>true</code> if the model is new; <code>false</code> otherwise.</p>

<h4>Example - check if a model is new</h4>

<pre><code>&lt;script&gt;
var Product = kendo.data.Model.define({
    id: "productId",
    fields: {
        productId: {
            editable: false
        }
    }
});
var productOne = new Product();
console.log(productOne.isNew()); // outputs "true"
var productTwo = new Product({ productId: 1 });
console.log(productTwo.isNew()); // outputs "false" because productId is set to 1
&lt;/script&gt;
</code></pre>

<h3 id="methods-set"><a href="#methods-set">set</a></h3>

<p>Sets the value of the specified field. Inherited from <code>kendo.data.ObservableObject</code>. Examples and more info can be found in the <a href="/api/javascript/data/observableobject#methods-set">set</a> section of the
ObservableObject API reference.</p>

<h3 id="methods-toJSON"><a href="#methods-toJSON">toJSON</a></h3>

<p>Creates a plain JavaScript object which contains all fields of the <code>Model</code>. Inherited from <code>kendo.data.ObservableObject</code>. Examples and more info can be found in the <a href="/api/javascript/data/observableobject#methods-toJSON">toJSON</a> section of the
ObservableObject API reference.</p>

<h2 id="events"><a href="#events">Events</a></h2>

<h3 id="events-change"><a href="#events-change">change event</a></h3>

<p>Raised when a field value is updated via the <code>set</code> method. Inherited from <code>kendo.data.ObservableObject</code>. Examples and more info can be found in the <a href="/api/javascript/data/observableobject#events-change">change</a> section of the
ObservableObject API reference.</p>

<h3 id="events-get"><a href="#events-get">get event</a></h3>

<p>Raised when the <code>get</code> method is invoked. Inherited from <code>kendo.data.ObservableObject</code>. Examples and more info can be found in the <a href="/api/javascript/data/observableobject#events-get">get</a> section of the
ObservableObject API reference.</p>

<h3 id="events-set"><a href="#events-set">set event</a></h3>

<p>Raised when the <code>set</code> method is invoked. Inherited from <code>kendo.data.ObservableObject</code>. Examples and more info can be found in the <a href="/api/javascript/data/observableobject#events-set">set</a> section of the
ObservableObject API reference.</p> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

